<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { jumpPage, Toast } from "@/utils";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import NavBar from "../../components/NavBar.vue";
import SliderRange from "@/components/xz-slider-range/xz-slider-range.vue";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

let state = reactive({
	navHeight: 0,
	merchant: {
		keyword: "",
		type: 1,
		/* 费率值 */
		feeValue: 0.6,
		/* 分账比例 */
		shareRate: null,
		/* 商户编号 */
		merchantId: null,
		/* 商户名称 */
		merchantName: "",
		/* 用户ID */
		userId: null,
		/* 用户名 */
		userName: "",
	},
	merchantList: [],
	/* 用户列表 */
	userList: [],
	selectMerchant: {}
})
// 添加分账商户弹窗-点击确定按钮后打开
let addAccountMerchantPopup1 = ref(false);
// 分账比例设置弹窗
let accountRatioSetPopup = ref(false);
let realNameCommitTag= ref(false);
/* 选择用户弹窗 */
let userListPopup = ref(false);
/* 实名认证弹窗 */
let authNamePopup = ref(false);
/* 0 微信认证 1 支付宝认证 */
let authTab = ref(0);

onShow(() => {
	/* 获取分账商户数据 */
	getMerchantList();
	/* 获取用户列表 */
	getUserList();
})

/* 商户名称搜索按钮确认事件 */
const handleSearch = () => {
	state.merchantList = [];
	getMerchantList();
}

// 复制按钮点击事件
const handleCopy = (value, msg) => {
	uni.setClipboardData({
		data: value,
		success: () => {
			Toast(`${msg}复制成功`);
		},
		fail: () => {
			Toast(`${msg}复制失败`);
		}
	})
}

/* 添加/编辑分账商户按钮点击事件 */
const handleAddOrEditMerchant = (item) => {
	if (item.adaStatus == -1) {
		jumpPage(`/pages/user/AutoAccounting/Add?userId=${item.userId}&id=${item.userId}`);
	} else {
		jumpPage(`/pages/user/AutoAccounting/Add?userId=${item.userId}`);
	}
}

// 添加分销商户按钮点击事件
const handleAddMerchant = () => {
	addAccountMerchantPopup1.value = true;
}

/* 选择用户弹窗确定按钮点击事件 */
const handleUserConfirm = (e) => {
	const value = e.value[0];
	state.merchant.userId = value.id;
	state.merchant.userName = value.userName;
	userListPopup.value = false;	
}

// 分账比例设置弹窗确定按钮点击事件
const handleAccountRatioConfirm = (type = 1) => {
	if (type === 2) {
		if (!state.merchant.merchantId) return Toast("请填写商户编号");
		if (!state.merchant.merchantName) return Toast("请填写商户名称");
		if (!state.merchant.userName) return Toast("请选择要绑定的用户");
	}
	if (!state.merchant.shareRate) {
		return Toast("请填写分账比例");
	}
	if (state.merchant.shareRate != null && state.merchant.shareRate != 0) {
		if ((Number(state.merchant.shareRate) + Number(state.merchant.feeValue)) >= 30) {
			return Toast("请输入有效比例,不得超过30%(含费率值0.6%)");
		}
	}
	request({
		url: `${ApiUrl.MerchantUrl}/addMerchant`,
		method: 'post',
		data: {
			...state.merchant
		}
	}).then(res => {
		if (res.status == 0) {
			Toast("保存成功！");
			if (type === 1) {
				accountRatioSetPopup.value = true;
			} else {
				addAccountMerchantPopup1.value = false;
			}
			getMerchantList();
		} else {
			Toast(res.msg);
		}
	})
}

const authNameCommit = () => {
	state.merchant.merchantName=state.selectMerchant.merchantName;
	state.merchant.feeValue=state.selectMerchant.feeValue;
	state.merchant.userId=state.selectMerchant.userId;
		
		/* 确认实名事件 */
		request({
			url: `${ApiUrl.doRealName}`,
			method: "post",
			data: {
				...state.merchant
			}
		}).then(res => {
			getMerchantList();
			authNamePopup.value = false
			Toast("商户进件完成！");
		})

}

/* 实名认证、确认实名按钮点击事件 */
const handleAuth = (item) => {
	
	if (userInfo.value.id == 1) {
		state.merchant.merchantName=item.merchantName;
		state.merchant.feeValue=item.feeValue;
		state.merchant.merchantId=item.merchantId;
		state.merchant.wechatMerchId=item.wechatMerchId;
		state.merchant.smid=item.smid;
		state.merchant.userId=item.userId;
		
		realNameCommitTag.value= true;
		
	} else {
		/* 商户：实名认证按钮点击事件 */
		authNamePopup.value = true;
		state.selectMerchant=item;
	}
}


const realNameCommitTagConfirm = () => {
		if (!state.merchant.merchantId) return Toast("请填写商户编号");
		if (!state.merchant.wechatMerchId) return Toast("请填写微信认证商户号");
		if (!state.merchant.smid) return Toast("请填写支付宝认证商户号");
		//if (!state.merchant.feeValue) return Toast("请填写费率");
		
		/* 管理员：确认实名按钮点击事件 */
		request({
			url: `${ApiUrl.doRealName}`,
			method: "post",
			data: {
				...state.merchant
			}
		}).then(res => {
		
			if (res.code === 200) {
				Toast("确认实名成功");
				getMerchantList();
			}
		})
		realNameCommitTag.value= false;
	
}



// 获取分账商户数据
const getMerchantList = () => {
	state.merchantList = [];
	request({
		url: `${ApiUrl.findMerList}`,
		method: 'post',
		data: {
			merchantName: state.merchant.keyword,
			userId: userInfo.value.id,
		}
	}).then(res => {
		if (res.code === 200) {
			state.merchantList = res.data;
		}
	})
}

/* 获取用户列表 */
const getUserList = () => {
	state.userList = [];
	request({
		url: `${ApiUrl.findSubUser}`,
		method: 'post',
		data: {
			userId: userInfo.value.id
		}
	}).then(res => {
		console.log("res", res)
		if (res.code === 200) {
			res.data.map(item => {
				item.text = item.userName
				item.value = item.id
			})
			state.userList = [res.data];
		}
	})
}

/* 微信认证、支付宝认证tab按钮点击事件 */
const handleAuthTab = (tabIndex) => {
	authTab.value = tabIndex;
}

watch(() => state.merchant.keyword, (val) => {
	if (!val) {
		getMerchantList();
	}
})

watch(() => accountRatioSetPopup.value, (val) => {
	if (!val) {
		state.merchant.shareRate = null;
	}
})

watch(() => addAccountMerchantPopup1.value, (val) => {
	if (!val) {
		state.merchant.merchantId = null;
		state.merchant.merchantName = "";
		state.merchant.shareRate = null;
		state.merchant.userName = "";
		state.merchant.userId = null;
	}
})
</script>

<template>
	<view class="account_merchant">
		<NavBar v-model:navHeight="state.navHeight" :hideBack="false">
		  <template v-slot:center>
				<view class="input">
					<input v-model.trim="state.merchant.keyword" placeholder="请输入商户名称" @confirm="handleSearch" />
				</view>
		  </template>
		</NavBar>
		<view class="tip">分账提示：分账商户必须在同一个渠道</view>
		<scroll-view scroll-y="true">
			<view v-if="state.merchantList.length > 0" class="merchant_list">
				<view class="merchant_item" v-for="(item, index) in state.merchantList" :key="item.id">
					<view class="merchant_info">
						<image class="avatar" src="/static/image/user/agent_avatar.png" mode="aspectFill" />
						<view class="merchant_name">
							<view>{{ item.userName }}({{ item.merchantName }})</view>
							<image v-if="item.adaStatus == -1" class="edit" src="/static/image/user/edit.png" mode="aspectFill" @click="handleAddOrEditMerchant(item)"/>
						</view>
						<view class="status">
							状态：
							<text v-if="!item.adaStatus">未提交</text>
							<text v-else-if="item.adaStatus == -1" class="danger">进件失败</text>
							<text v-else-if="item.adaStatus == 5" class="risk">待认证</text>
							<text v-else-if="item.adaStatus == 9" class="danger">审核异常</text>
							<text v-else-if="item.adaStatus == 1" class="success">审核通过</text>
							<text v-else class="examine">审核中</text>
						</view>
					</view>
					<view class="merchant_content">
						<view v-if="item.type == 0" class="main_merchant">主商户</view>
						<view class="merchant_row">
							<view class="left">
								微信认证商户号：<text>{{ item.wechatMerchId }}</text>
							</view>
							<view class="right" @click="handleCopy(item.wechatMerchId, '微信认证商户号')">复制</view>
						</view>
						<view class="merchant_row">
							<view class="left">
								支付宝认证商户号：<text>{{ item.smid }}</text>
							</view>
							<view class="right" @click="handleCopy(item.smid, '支付宝认证商户号')">复制</view>
						</view>
						<view class="merchant_row">
							<view class="left">
								商户号：<text>{{ item.merchantId }}</text>
							</view>
							<view class="right" @click="handleAddOrEditMerchant(item)">{{ item.adaStatus == -1 ? "编辑分账商户" : !item.adaStatus ? "添加分账商户" : "" }}</view>
						</view>
						<view class="merchant_row">
							<view class="left">
								使用状态：<text>{{ item.status == 1 ? "已开启" : "已关闭" }}</text>
							</view>
						</view>
						<view class="auth_name"  v-if="item.adaStatus == 5" @click="handleAuth(item)">{{  userInfo.id != 1 ? "实名认证" : "确认实名" }}</view>
					</view>
				</view>
			</view>
			<view v-else class="no_data">暂无数据</view>
		</scroll-view>
		<view class="btn_add_merchant">
			<view @click="handleAddMerchant">添加分销商户</view>
		</view>
		
		<!-- 添加分账商户弹窗-点击确定按钮后打开 -->
		<u-popup :show="addAccountMerchantPopup1" mode="center" :round="16">
			<view class="popup add_account_merchant">
				<view class="title">添加分账商户</view>
				<view class="row_item">
					<view>商户编号</view>
					<input v-model.trim="state.merchant.merchantId" maxlength="52" placeholder-style="color: #646466" placeholder="请输入商户编号" >
				</view>
				<view class="row_item">
					<view>商户名称</view>
					<input v-model.trim="state.merchant.merchantName" placeholder-style="color: #646466" placeholder="请输入商户名称" >
				</view>
				<view class="account_rate">
					<view class="rate_label">
						<text>分账比例</text>
						<input v-model.trim="state.merchant.shareRate" placeholder-style="color: #646466" type="number" >
						<text>%</text>
					</view>
				</view>
				<view class="row_item" @click="userListPopup = true">
					<view>绑定用户</view>
					<text>{{ state.merchant.userName ? state.merchant.userName : "请选择"}}</text>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
				<view class="row_item">
					<view>渠道</view>
					<view>汇付</view>
				</view>
				<view class="footer">
					<view @click="addAccountMerchantPopup1 = false">取消</view>
					<view @click="handleAccountRatioConfirm(2)">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 分账比例设置弹窗 -->
		<u-popup :show="accountRatioSetPopup" mode="center" :round="16">
			<view class="popup account_ratio_set">
				<view class="title">添加分账商户</view>
				<view class="account_rate">
					<view class="rate_label">
						<text>分账比例</text>
						<input v-model.trim="state.merchant.shareRate" placeholder-style="color: #646466" type="number" >
						<text>%</text>
					</view>
				</view>
				<view class="footer">
					<view @click="accountRatioSetPopup = false">取消</view>
					<view @click="handleAccountRatioConfirm(1)">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 管理员确认实名的 弹窗-->
		<u-popup :show="realNameCommitTag" mode="center" :round="18">
			<view class="popup account_ratio_set">
				<view class="title">确认商户实名</view>
				<view class="account_rate">
					<view class="rate_label" style="margin-bottom: 18rpx;">
						<text>商户名称</text>
						<input v-model.trim="state.merchant.merchantName" maxlength="32" placeholder-style="color: #646466" placeholder="请输入商户名称"  style="width: 300rpx;">
					</view>
					<view class="rate_label" style="margin-bottom: 18rpx;">
					<text>商户费率</text>
					<input v-model.trim="state.merchant.feeValue" placeholder-style="color: #646466" type="number" style="width: 280rpx;">
					<text>%</text>
					</view>
					<view class="rate_label" style="font-size: 11px;margin-bottom: 18rpx;">
					<text style="    color: #0a9c0a;font-weight: bold;">以下内容，请从汇付平台复制对应商户的信息：</text>
					</view>
					<view class="rate_label" style="margin-bottom: 18rpx;">
						<text style="color:red;margin-right: 10rpx;">*</text><text>汇付商户号</text>
						<input v-model.trim="state.merchant.merchantId" maxlength="20" placeholder-style="color: #646466" placeholder="请输入汇付商户号" style="width: 300rpx;">
					</view>
					<view class="rate_label" style="margin-bottom: 18rpx;">
						<text style="color:red;margin-right: 10rpx;">*</text><text>微信商户号</text>
						<input v-model.trim="state.merchant.wechatMerchId" maxlength="20" placeholder-style="color: #646466" placeholder="请输入微信商户号" style="width: 300rpx;">
					</view>
					<view class="rate_label" style="margin-bottom: 18rpx;">
						<text style="color:red;margin-right: 10rpx;">*</text><text>支付宝商户</text>
						<input v-model.trim="state.merchant.smid" maxlength="20" placeholder-style="color: #646466" placeholder="请输入支付宝商户号" style="width: 300rpx;" >
					</view>
				</view>
				<view class="footer">
					<view @click="realNameCommitTag = false">取消</view>
					<view @click="realNameCommitTagConfirm()">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 选择用户弹窗 -->
		<u-picker
			:show="userListPopup"
			:columns="state.userList"
			@cancel="userListPopup = false"
			@confirm="handleUserConfirm" />
			
		<!-- 实名认证弹窗 -->
		<u-popup :show="authNamePopup" mode="center" :round="16">
			<view class="auth_name_popup">
				<view class="title">实名认证</view>
				<view class="tab">
					<view :class="{ 'active': authTab === 0 }" @click="handleAuthTab(0)">微信认证</view>
					<view :class="{ 'active': authTab === 1 }" @click="handleAuthTab(1)">支付宝认证</view>
				</view>
				<image v-if="authTab === 0" src="https://www.tkyzn123.cn/photo/crmebimage/public/ada/wxRz.jpg" show-menu-by-longpress mode="aspectFill"></image>
				<image v-else src="https://www.tkyzn123.cn/photo/crmebimage/public/ada/zfbRz.jpg" show-menu-by-longpress mode="aspectFill"></image>
				<view class="auth_tip">
					<text v-if="authTab === 0">提示:长按识别上方二维码打开【微信支付商家助手】小程序进行认证。</text>
					<text v-else>提示:长按保存上方二维码图片，然后手动打开【支付宝】APP扫一扫识别保存的二维码进行认证。</text>
				</view>
				<view class="auth_tip1">基于(非银行支付机构网络支付业务管理办法)，即日起须<text>收款本人扫码</text>完成<text>实名操作</text>，否则无法使用微信和支付宝支付。</view>
				
				<view class="btn_know" @click="authNameCommit()">确认实名</view>
				<view class="btn_know" style="color:#635b5b;" @click="authNamePopup = false">关闭</view>
				
			</view>
		</u-popup>
	</view>

</template>

<style lang="scss">
.account_merchant {
	width: 750rpx;
	box-sizing: border-box;
	padding-bottom: 140rpx;
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
			}
		}
	}
	.input {
		width: 436rpx;
	}
	.tip {
		position: fixed;
		z-index: 10;
		top: calc(v-bind('state.navHeight') * 1px);
		width: 750rpx;
		height: 80rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		color: #FF6619;
		box-sizing: border-box;
		padding-left: 40rpx;
	}
	.merchant_list {
		padding-top: calc(v-bind('state.navHeight') * 1px + 104rpx);
		.merchant_item {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 auto 24rpx;
			.merchant_info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 14rpx 32rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
				.avatar {
					flex-shrink: 0;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
				.merchant_name {
					display: flex;
					align-items: center;
					flex: 1;
					view {
						max-width: 250rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
						font-size: 32rpx;
						color: #303030;
					}
					image {
						flex-shrink: 0;
						width: 36rpx;
						height: 36rpx;
						margin-left: 8rpx;
					}
				}
				.status {
					margin-left: auto;
					font-size: 28rpx;
					color: #303030;
					text {
						color: #303030;
						&.success {
							color: #25DFA5;
						}
						&.danger {
							color: #fb0e0e;
						}
						&.examine {
							color: #1E90FF;
						}
						&.risk {
							color: #e03997;
						}
					}
				}
			}
			.merchant_content {
				width: 100%;
				box-sizing: border-box;
				padding: 32rpx;
				.main_merchant {
					text-align: left;
					font-size: 28rpx;
					color: #25DFA5;
					margin-bottom: 12rpx;
				}
				.merchant_row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&:not(:last-child) {
						margin-bottom: 12rpx;
					}
					.left {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #969699;
						text {
							color: #303030;
						}
					}
					.right {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #FF9832;
					}
				}
				.auth_name {
					width: 220rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					margin: 12rpx 0 0 auto;
				}
			}
		}
	}
	.no_data {
		font-size: 24rpx;
		color: #969699;
		line-height: 36rpx;
		text-align: center;
		padding-top: calc(v-bind('state.navHeight') * 1px + 104rpx);
	}
	.btn_add_merchant {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 140rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		view {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.add_account_merchant,
	.account_ratio_set {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 0 0;
	}
	.add_account_merchant {
		.content {
			font-size: 24rpx;
			line-height: 28rpx;
			color: #353535;
			text-align: center;
			padding-bottom: 38rpx;
		}
		.row_item {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 48rpx;
			margin-bottom: 20rpx;
			view {
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
				&:last-child {
					color: #646466;
					margin-left: 62rpx;
				}
			}
			input {
				height: 56rpx;
				background: #F2F2F2;
				border-radius: 8rpx;
				border: none;
				outline: none;
				font-size: 24rpx;
				color: #000000;
				margin: 0 20rpx 0 14rpx;
				box-sizing: border-box;
				padding: 0 15rpx;
			}
			text {
				margin-left: auto;
				font-size: 24rpx;
				line-height: 28rpx;
				color: #646466;
			}
			image {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}
		.account_rate {
			width: 100%;
			box-sizing: border-box;
			padding: 0 48rpx 30rpx;
			.rate_label {
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
				display: flex;
				align-items: center;
				input {
					width: 134rpx;
					height: 56rpx;
					background: #F2F2F2;
					border-radius: 8rpx;
					border: none;
					outline: none;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					margin: 0 20rpx 0 14rpx;
					box-sizing: border-box;
					padding: 0 15rpx;
				}
			}
		}
	}
	.account_ratio_set {
		.account_rate {
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx 30rpx;
			.rate_label {
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
				display: flex;
				align-items: center;
				justify-content: center;
				input {
					width: 134rpx;
					height: 56rpx;
					background: #F2F2F2;
					border-radius: 8rpx;
					border: none;
					outline: none;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					margin: 0 20rpx 0 14rpx;
					box-sizing: border-box;
					padding: 0 15rpx;
				}
			}
			.slider {
				width: 100%;
				.slider_box {
					slider {
						padding: 0 !important;
						height: 16rpx !important;
					}
				}
			}
			.rate_number {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				line-height: 23rpx;
				color: #353535;
				margin: 12rpx 8rpx 0;
			}
		}
	}
	.popup {
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 22rpx;
		}
		.footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
	.auth_name_popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx 0 0;
		width: 686rpx;
		.title {
			font-weight: bold;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.tab {
			width: 600rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			view {
				width: 50%;
				height: 72rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999999;
				&.active {
					border-radius: 12rpx;
					color: #ffffff;
					background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
				}
			}
		}
		image {
			width: 200rpx;
			height: 200rpx;
			margin: 40rpx 0;
		}
		.auth_tip {
			box-sizing: border-box;
			padding: 0 40rpx;
			text {
				display: block;
				font-size: 28rpx;
				line-height: 33rpx;
				text-align: justify;
				color: #1A1A1A;
			}
		}
		.auth_tip1 {
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: justify;
			color: #1A1A1A;
			box-sizing: border-box;
			padding: 40rpx;
			text {
				color: #FF4638;
			}
		}
		.btn_know {
			width: 100%;
			height: 112rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FF4638;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		}
	}
}
</style>